<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动物信息表</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #C0C0C0;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .animal-img {
            max-width: 100px;
            max-height: 100px;
        }
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
        }
        .default-img {
            max-width: 100px;
            max-height: 100px;
            background-color: #f0f0f0;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <table id="animalTable">
            <thead>
                <tr>
                    <th>animal_id</th>
                    <th>animal_name</th>
                    <th>animal_img</th>
                    <th>animal_remark</th>
                    <th>animal_type_id</th>
                    <th>stadium_id</th>
                    <th>操作</th>
                </tr>
                <tr v-if="animalList.length == 0">
                    <td colspan="7">
                        <label style="color: grey;">暂无动物信息</label>
                    </td>
                </tr>
                <tr v-for="(item, index) in paginatedAnimalList">
                    <td>{{ item.animalId }}</td>
                    <td>{{ item.animalName }}</td>
                    <td>
                        <img :src="item.animalImg" class="animal-img" alt="Animal Image" @error="defaultImage">
                    </td>
                    <td>{{ item.animalRemark }}</td>
                    <td>{{ item.animalTypeId }}</td>
                    <td>{{ item.stadiumId }}</td>
                    <td>
                        <a  target="mainFrame">
                            <i class="layui-icon layui-icon-delete" @click="doDelete(item.animalId, index)" style="font-size: 30px; color: #1E9FFF;"></i>
                        </a>
                        <a  target="mainFrame">
                            <i class="layui-icon layui-icon-edit"  @click="toUpdatePageUpdate(item.animalId)" style="font-size: 30px; color: #1E9FFF;"></i>
                        </a>
                        <a  target="mainFrame">
                            <i class="layui-icon layui-icon-list" @click="toUpdatePageDetails(item.animalId)" style="font-size: 30px; color: #1E9FFF;"></i>
                        </a>
                    </td>
                </tr>
            </thead>
            <tbody>
                <!-- 数据将通过JavaScript动态插入 -->
            </tbody>
        </table>
        <div class="pagination">
            <button @click="prevPage">上一页</button>
            <button @click="nextPage">下一页</button>
        </div>
    </div>
    
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                animalList: [],
                currentPage: 1,
                itemsPerPage: 10
            },
            computed: {
                paginatedAnimalList() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.animalList.slice(start, end);
                },
                totalPages() {
                    return Math.ceil(this.animalList.length / this.itemsPerPage);
                }
            },
            methods: {
                prevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage--;
                    }
                },
                nextPage() {
                    if (this.currentPage < this.totalPages) {
                        this.currentPage++;
                    }
                },
                doDelete(id, index) {
                    if (confirm('你确定删除当前的动物信息吗?')) {
                        let url = "http://localhost:8080/animal/delete";
                        let params = { animalId: id };
                        $.get(url, params, res => {
                            layer.msg(res.msg);
                            if (res.code == 200) {
                                this.animalList.splice(index,1);
                            }
                        }, "JSON");
                    }
                },
                toUpdatePageUpdate(id) {
                    window.location.href = "animal-update.html?gid="+id;
                },
                toUpdatePageDetails(id) {
                    window.location.href = "animal-details.html?gid="+id;
                },
                defaultImage(event) {
                    event.target.src = 'imgs/default-animal.png'; // 默认图片路径
                    event.target.onerror = null; // 防止无限循环
                }
            },
            created() {
                let userId = localStorage.getItem("userId");
                let url = "http://localhost:8080/animal/list";
                let params = { userId: userId };
                $.get(url, params, res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.animalList = res.data;
                    } else {
                        // 处理错误情况
                        console.error('Failed to fetch animal list:', res.message);
                        alert('Failed to fetch animal list: ' + res.message);
                    }
                }, "JSON");
            }
        });
    </script>
</body>
</html>